在電腦圖形中，我們區分 向量 與 位圖 圖形。向量圖形（如 SVG）透過邏輯形狀描述影像；每個元素都是 DOM 中的持久物件。相反地，位圖圖形（如 HTML5 Canvas）則以 彩色像素點的陣列進行運作。
1. 過渡到 Canvas
雖然 SVG 透過 CSS 更容易樣式化，但瀏覽器必須追蹤每一個節點。對於高效率需求，例如包含數千個移動元件的遊戲，Canvas API 優於其他選擇。它提供了一個單一的 DOM 元素，封裝了繪圖表面——基本上可視為「空白畫布」。
2. 繪圖內容
當 <canvas> 元素還未初始化其 內容時，就如同一個「黑盒子」。該物件的方法提供了實際的繪圖介面，使顯示元件與渲染邏輯解耦。
var context = canvas.getContext("2d");
3. 命名空間意識
在基於 XML 的圖形（如 SVG）中， xmlns="http://www.w3.org/2000/svg" 屬性至關重要。它通知瀏覽器從標準的 HTML 解析切換至特定的圖形模式，讓形狀標籤能被識別為可互動的物件。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What is the primary difference between Vector and Bitmap graphics?
Vector uses pixel data; Bitmap uses logical shapes.
Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.
Vector is always faster for game rendering.
Bitmap elements remain persistent in the DOM.
✅ Correct!
Correct! Vector graphics describe 'what' a shape is, while bitmaps describe 'what color' each pixel is.❌ Incorrect
Think about the DOM: SVG elements are actual tags (logical), whereas Canvas is just a grid of pixels (rasters).QUESTION 2
What is the purpose of the
xmlns attribute in an SVG tag?To define the width and height of the viewport.
To link an external CSS stylesheet.
To change the element to a different XML namespace for specific schema recognition.
To enable hardware acceleration for bitmap rendering.
✅ Correct!
Exactly. Without the namespace, the browser would treat tags like <circle> as unknown HTML tags.❌ Incorrect
XML namespaces (xmlns) are used to identify which schema the browser should use to interpret the tags.QUESTION 3
How do you access the drawing interface for an HTML5 Canvas?
By modifying the .style.color property of the canvas.
By calling the getContext('2d') method on the canvas element.
By inserting SVG tags inside the <canvas> tags.
By using the document.draw() global function.
✅ Correct!
The context object is the gateway to all imperative drawing methods.❌ Incorrect
The canvas itself is just a container; the 'context' provides the methods like fillRect().QUESTION 4
Why does a dashboard with 10,000 data points run faster on Canvas than SVG?
Canvas uses fewer DOM nodes, reducing browser tracking overhead.
Canvas allows for better CSS styling of individual bars.
SVG cannot handle color hex codes.
Canvas automatically deletes old frames.
✅ Correct!
Correct. 10,000 SVG nodes would bloat the DOM, while Canvas only has one node regardless of the number of shapes drawn.❌ Incorrect
Every SVG shape is a DOM object the browser must maintain. Canvas only maintains pixel data.QUESTION 5
Once a shape is drawn to a Canvas, what happens to its 'identity'?
It can be selected and moved via standard DOM queries.
It is stored as a persistent object in the browser memory.
It becomes part of the pixel raster and loses its individual identity.
It is automatically converted to an SVG path.
✅ Correct!
Yes. After drawing, the canvas only knows 'these pixels are red'; it doesn't know 'this is a circle'.❌ Incorrect
Unlike SVG, Canvas is imperative. Once drawn, the 'shape' is just colored pixels.Case Study: EconomicCorp Data Visualization
Optimizing a High-Density Financial Dashboard
EconomicCorp needs a real-time ticker that displays 5,000 trade entries per minute. Initially, they used SVG, but the browser freezes as the trading day progresses. You are tasked with migrating the rendering logic to Canvas to maintain 60 FPS.
Q
Identify the primary architectural flaw in using SVG for a 5,000-node real-time ticker.
Solution:
The flaw is 'DOM Bloat.' Every SVG element is a persistent DOM object. Tracking 5,000+ objects with frequent updates forces the browser to perform expensive layout and reflow calculations every frame, leading to CPU exhaustion.
The flaw is 'DOM Bloat.' Every SVG element is a persistent DOM object. Tracking 5,000+ objects with frequent updates forces the browser to perform expensive layout and reflow calculations every frame, leading to CPU exhaustion.
Q
Describe how the 'Context' object simplifies the rendering of these 5,000 items.
Solution:
By using getContext('2d'), the developer can iterate through the trade data and call context.fillRect() or context.lineTo() directly. This draws pixels into a single buffer. The browser only manages one DOM element (the canvas), significantly reducing memory overhead.
By using getContext('2d'), the developer can iterate through the trade data and call context.fillRect() or context.lineTo() directly. This draws pixels into a single buffer. The browser only manages one DOM element (the canvas), significantly reducing memory overhead.
Q
If a user wants to click on a specific trade bar to see details, which rendering method (SVG or Canvas) makes 'Hit Detection' easier and why?
Solution:
SVG makes hit detection easier because every bar is a DOM element that supports standard event listeners (onclick). In Canvas, since the bar is just pixels, the developer must manually calculate if the mouse coordinates intersect with the area where the bar was drawn.
SVG makes hit detection easier because every bar is a DOM element that supports standard event listeners (onclick). In Canvas, since the bar is just pixels, the developer must manually calculate if the mouse coordinates intersect with the area where the bar was drawn.